<template>
  <div>

    <el-card>
      <h4>实时监控</h4>
    </el-card>

    <el-card style="margin: 10px 0;">
      <el-input v-model="duaninput" placeholder="请输入短链地址" style="width: 420px;margin: 0 10px;" clearable></el-input>
      <el-button type="primary" @click="QueryDlList">查询</el-button>
      <el-button type="text" @click="QueryJiLulist">查询记录</el-button>
      <br>
      <br>
      <el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="正在请求中"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
        :row-class-name="tableRowClassName" :row-style="{ height: '60px' }" :cell-style="{ padding: '0' }">
        <el-table-column type="index" align="center" width="50">
        </el-table-column>
        <el-table-column prop="city" align="center" label="城市">
          <template slot-scope="scope">
            <span>{{ scope.row.city }}</span>
          </template>

        </el-table-column>
        <el-table-column align="center" label="最终网站" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <a :href=scope.row.httpAddress target="_blank" v-if="scope.row.httpAddress != null"> {{
              scope.row.httpAddress
            }}</a>
            <span v-if="scope.row.httpAddress == null">~</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="tag" label="短链详情">
        </el-table-column>
      </el-table>

    </el-card>
    <!-- 弹窗 -->
    <el-drawer title="查询记录" :visible.sync="waidrawer" size="30%">
      <div>
        <el-table :data="chaxunList.data">
          <el-table-column property="duanlian" label="短链"></el-table-column>
          <el-table-column property="name" label="详情">
            <template slot-scope="scope">
              <el-button type="text" @click="OPenneidwr(scope.row.list)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background @size-change="orderSizeChange" @current-change="orderCurrentChange"
          :page-sizes="[10, 20, 50, 100]" :page-size="10" :current-page="pageCode"
          t="total, sizes, prev, pager, next, jumper" :total="chaxunList.total">
        </el-pagination>


        <el-drawer title="短链详情" :append-to-body="true" :visible.sync="neidrawer" :row-class-name="tableRowClassName">
          <el-table :data="queryneiList" max-height="650">
            <el-table-column property="city" label="城市">
            </el-table-column>
            <el-table-column property="duanlian" label="短链"></el-table-column>
            <el-table-column property="httpAddress" label="地址"></el-table-column>


          </el-table>
        </el-drawer>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import { RealTimeMon, RealChaJilu } from '@/api/table'
export default {
  data() {
    return {
      pageCode: 1,
      pageSize: 10,
      totalCount: 1,
      duaninput: '',
      loading: false,
      tableData: [],
      waidrawer: false,
      chaxunList: [],
      neidrawer: false,
      queryneiList: [],

    };
  },
  computed: {


  },
  mounted() {

  },
  created() {
  },
  methods: {
    // 查询断链
    async QueryDlList() {
      if (this.duaninput == '') {
        this.$message.warning("请输入您要查询的短链")
      } else {
        this.loading = true
        let data = {
          duanlian: this.duaninput
        }
        let res = await RealTimeMon(data)
        if (res.code === 200) {
          this.tableData = res.data
          this.$message.success(res.msg)
          this.loading = false
        } else {
          this.loading = false
          this.$message.error(res.msg)
        }
      }
    },

    tableRowClassName({ row, rowIndex }) {
      if (row.city == '本地') {
        return 'success-row';
      }
      if (row.tag != '' && row.tag != null) {
        return 'warning-row';

      }
    },

    async QueryJiLulist() {
      this.waidrawer = true
      let data = {
        currentPage: this.pageCode,
        pageSize: this.pageSize
      }
      let res = await RealChaJilu(data)
      if (res.code === 200) {
        this.chaxunList = res
      } else {
        this.$message.error(res.msg)
      }
    },

    async orderSizeChange(val) {
      this.pageSize = val;
      this.QueryJiLulist();
    },
    async orderCurrentChange(val) {
      this.pageCode = val;
      this.QueryJiLulist();
    },

    OPenneidwr(e) {
      this.neidrawer = true
      this.queryneiList = e
    }

  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .warning-row {
  background: oldlace;
}

::v-deep .el-table .success-row {
  background: #d9ebcf;
}
</style>
